<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>查询预定</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="../css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <style>
        input{
            display: inline-block !important;
        }
        a:link{
            text-decoration:none;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    username
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">散客开单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Guests_check_in.html">宾客入住</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Ordinary_invoicing.html">结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Query_book.html" style="background-color: #1E90FF">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html">房间设置</a></dd>
                        <dd><a href="Operator_setup.html">操作员设置</a></dd>
                    </dl>
                </li>
                 <li class="layui-nav-item">
                    <a href="javascript:;">订单信息</a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" onclick="tan()">查看订单信息</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
            <h1>预定信息</h1><br/>
            <input id="search_keyword" name="name" type="text" class="form-control" placeholder="输入姓名搜索" style="width: 200px">
            <button class="layui-btn layui-btn-radius layui-btn-primary" onclick="searchOrderByUsername()">查找</button>
            <br/>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th>编号</th>
                    <th>房间类型</th>
                    <th>宾客姓名</th>
                    <th>宾客身份证</th>
                    <th>订单状态</th>
                    <th>详细信息</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="user_data">
                <tr>
                    <td>001</td>
                    <td>标准房</td>
                    <td>郑杰</td>
                    <td>510xxxxxxxxxxxxx</td>
                    <td>未入住</td>
                    <td><a href="ReserveMes.html">查看</a></td>
                    <td>
                        <button onclick="openRoom()">登记</button>
                        <button onclick="offRoom()">取消</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
</div>


 <link rel="stylesheet" href="/hotel/css/bootstrap.min.css">

<script src="../js/layui.all.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <script src="../bt/modal.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>

<script type="text/javascript">
    $(function () {
        loadData();
    });
    function tan(){
    	$("#webSocketModal").modal('show')
    }
    function loadData() {
        $.ajax({
            type:'get',
            url:'/order/state',
            dataType:'json',
            data:'state=未入住',
            success:function (msg) {
                var html = "";
                for (var i = 0; i < msg.length; i++) {
                    html += "<tr>\n" +
                        "<td>"+msg[i].orderNumber+"</td>\n" +
                        "<td>"+msg[i].ocb[0].roomtype.name+"</td>\n" +
                        "<td>"+msg[i].ocb[0].guestId.name+"</td>\n" +
                        "<td>"+msg[i].ocb[0].guestId.idCard+"</td>\n" +
                        "<td>"+msg[i].status+"</td>\n" +
                        "<td><a href='ReserveMes.html?id="+msg[i].id+"'>查看</a></td>\n" +
                        "<td>\n" +
                        "<button onclick='openRoom("+msg[i].id+")'>登记</button>\n" +
                        "<button onclick='offRoom("+msg[i].id+")'>取消</button>\n" +
                        "</td>\n" +
                        "</tr>";
                }
                $("#user_data").html(html);
            }
        });
    }

    function searchOrderByUsername() {
        var regex = /^[\u2E80-\u9FFF]{2,6}$|^[a-zA-Z-]{6,18}$/;
        var searchData = $("#search_keyword").val();
        var data = JSON.stringify($('#search_keyword').serializeJSON());
        console.info(data);
        if (regex.test(searchData)){
            alert('执行查询');
            $.ajax({
                url:"/order/guest/searchByName",
                type:'post',
                data:data,
                contentType:"application/json;charset=utf-8",
                dataType:'json',
                success:function (msg) {
                    console.info(msg);
                    var html = "";
                    for (var i = 0; i < msg.length; i++) {
                    	if(msg[i].status=="未入住"){
                    		console.info("未入住")
                    		html += "<tr>\n" +
                            "<td>"+msg[i].orderNumber+"</td>\n" +
                            "<td>"+msg[i].ocb[0].roomtype.name+"</td>\n" +
                            "<td>"+msg[i].ocb[0].guestId.name+"</td>\n" +
                            "<td>"+msg[i].ocb[0].guestId.idCard+"</td>\n" +
                            "<td>"+msg[i].status+"</td>\n" +
                            "<td><a href='ReserveMes.html?id="+msg[i].id+"'>查看</a></td>\n" +
                            "<td>\n" +
                            "<button onclick='openRoom("+msg[i].id+")'>登记</button>\n" +
                            "<button onclick='offRoom("+msg[i].id+")'>取消</button>\n" +
                            "</td>\n" +
                            "</tr>";
                    	}
                        
                    }
                    $("#user_data").html(html);
                }
            });
        } else{
            alert('非法输入，请核正后再重新提交');
        }
    }

    function findMes(value){
        window.location.href="OrderMes.html?id="+value;
    }

</script>
<script>
    function openRoom(oid1){
        var c = confirm("亲，确定生成订单吗？");
        if (c == true) {


            alert("生成订单成功！请在订单页面查看");

            window.location.href="index.html?id="+oid1;
        }
    }
</script>
<script>
    function offRoom(oid){
        var a = confirm("亲，您确定要取消吗？");
        if (a == true) {
            $.ajax({
                url:"/order/del/"+oid+"",
                type:'delete',
                dataType:'json',
                success:function (msg) {
                    alert('成功');
                    loadData();
                }
            });
        }
    }
</script>
<script type="text/javascript">

var websocket = null;
//浏览器是否支持
if ('WebSocket' in window) {
  // 上面我们给webSocket定位的路径
  websocket = new WebSocket('ws://192.168.3.103:8080/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}
//建立连接
websocket.onopen = function (event) {
  console.log('建立连接');
				
}
//关闭连接
websocket.onclose = function (event) {
  console.log('连接关闭');
}
//消息来的时候的事件
websocket.onmessage = function (event) {
  // 这里event.data就是我们从后台推送过来的消息
  console.log('收到消息:' + event.data);
  $('#message_content').append(event.data+'\n');
  // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
  	document.getElementById("myAudio").play();
}

//发生错误时
websocket.onerror = function () {
  alert('websocket通信发生错误！');
}
//窗口关闭时，Websocket关闭
window.onbeforeunload = function () {
  websocket.close();
}

</script>
<audio src="../video/dingdong.mp3"  id="myAudio" ></audio>
</body>
</html>